{% extends 'base-layui.html' %}

{% block header %}
  <h1>{% block title %}数据库表结构比对系统{% endblock %}</h1>
  <!-- 引入 layui.js -->
<!--<link rel="stylesheet" href="layui/js/layui.js">-->
{% endblock %}

{% block leftcatalog %}
<ul class="layui-nav layui-nav-tree" lay-filter="test">
  <li class="layui-nav-item"><a href="/configDatabaseSource">配置数据源</a></li>
  <li class="layui-nav-item"><a href="/configCompareTask">配置比对任务</a></li>
  <li class="layui-nav-item"><a href="javascript:;">表差异比对</a></li>
  <li class="layui-nav-item layui-this"><a href="/compareColumn">字段差异比对</a></li>
  <li class="layui-nav-item">
    <a href="/compare">所有表及字段信息</a>
  </li>

  <!-- 更多菜单 -->
</ul>
{% endblock %}

{% block maincontent %}

<form class="layui-form layui-row layui-col-space16" >
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-tabs"></i>
      </div>
      <input type="text" id="table_name" name="table_name" value="{{ table_name }}" placeholder="表名" class="layui-input" lay-affix="clear">
    </div>
  </div>
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-cols"></i>
      </div>
      <input type="text" id="column_name" name="column_name" value="{{ column_name }}" placeholder="字段名" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-col-md3">
    <div class="layui-btn-container layui-col-xs12">
      <button class="layui-btn" lay-submit lay-filter="demo-table-search">Search</button>
      <button type="reset" class="layui-btn layui-btn-primary">Clear</button>
    </div>
  </div>
</form>


<table class="layui-hide" lay-data="{page: true, limit: 6, limits:[6]}" id="ID-table-demo-search">
</table>


<script type="text/html" id="toolbarDemo">

</script>


{% endblock %}

{% block script %}

<script>


  var table_name_tmp = getUrlParam("table_name");
  var column_name_tmp = getUrlParam("column_name");
  // console.log("getUrlParams(\"table_name\") = " + table_name_tmp);
  document.getElementById("table_name").value = table_name_tmp;
  document.getElementById("column_name").value = column_name_tmp;

layui.use(function(){
  var $ = layui.$;
  var table = layui.table;
  var layer = layui.layer;
  var form = layui.form;

  // 渲染
  table.render({
    elem: '#ID-table-demo-search',
    url: '/getCompareColumnData',  // 此处为静态模拟数据，实际使用时需换成真实接口
    // page: true,
    page : {
        //limits :[10,20,50,100]
        //count: data.length             //数据总数
        limit : 10 //每页显示条数
        ,
        limits : [ 10, 20, 50, 100, 1000 ],
        curr : 1 //起始页
        ,
        groups : 5 //连续页码个数
        ,
        prev : '上一页' //上一页文本
        ,
        next : '下一页' //下一页文本
        ,
        first : 1 //首页文本
        //, last: 100                     //尾页文本
        ,
        layout : [ 'prev', 'page', 'next',
                'refresh', 'skip', 'count',
                'limit' ]
    },
    height : 700,
    // toolbar : true,
    toolbar: '#toolbarDemo',
    defaultToolbar: ['filter', 'exports', 'print', {
      title: '提示',
      layEvent: 'LAYTABLE_TIPS',
      icon: 'layui-icon-tips'
    }],
    where : {
      "table_name"  : table_name_tmp,
      "column_name" : column_name_tmp
    },
    css: [ // 设置单元格样式
      // 取消默认的溢出隐藏，并设置适当高度
      '.layui-table-cell{height: 50px; line-height: 40px;}',
      '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
      '.layui-table-cell select{height: 36px; padding: 0 5px;}'
    ].join(''),
    cols: [
      [ // 表头
        {field: 'schema', title: 'schema', width:100, align: 'center', fixed: 'left', rowspan : 2 },
        {field: 'table_name', title: '表名', width:250, align: 'left', fixed: 'left', rowspan : 2 },
        {title: '字段各环境比对结果', width:160, align: 'center', colspan : 3 }
      ],
      [
        {field: 'column_name', title: '字段名', width:250, align: 'left', rowspan : 2 },
        {field: 'gauss_plan_sit', title: 'gauss_plan_sit', width:160, align: 'center', templet: function(d){
          if(d.gauss_plan_sit === '√'){
            // return '<span style="color: blue">√</span>';
            return '<div style="background-color: green; color: white; padding: 5px;">'
                   + '√' + '</div>';
          } else {
            return '<div style="background-color: red; color: white; padding: 5px;">'
                   + '×' + '</div>';
          }
        }},
        {field: 'pg_plan_uat', title: 'pg_plan_uat', width:160, align: 'center', templet: function(d){
          if(d.pg_plan_uat === '√'){
            // return '<span style="color: blue">√</span>';
            return '<div style="background-color: green; color: white; padding: 5px;">'
                   + '√' + '</div>';
          } else {
            return '<div style="background-color: red; color: white; padding: 5px;">'
                   + '×' + '</div>';
          }
        }},
      ]
    ],
    loading : true,
    done: function(res, curr, count){
      console.log(res);
    }
  });

  // 搜索提交
  form.on('submit(demo-table-search)', function(data){
    var field = data.field; // 获得表单字段
    // 执行搜索重载
    table.reload('ID-table-demo-search', {
      page: {
        curr: 1 // 重新从第 1 页开始
      },
      // url: '/getCompareColumnData',  // 此处为静态模拟数据，实际使用时需换成真实接口
      where : {
        "table_name"  : table_name_tmp,
        "column_name" : column_name_tmp
      }
    });
    // layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
    return true; // 阻止默认 form 跳转
  });


});

//获取地址栏参数，key:参数名称
function getUrlParams(key) {
	let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
	let r = window.location.search.substr(1)
		.match(reg);
	if (r != null)
		return unescape(r[2]);
	return null;
}
//获取地址栏参数//可以是中文参数
function getUrlParam(key) {
    // 获取参数
    var url = window.location.search;
    // 正则筛选地址栏
    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
    // 匹配目标参数
    var result = url.substr(1).match(reg);
    //返回参数值
    return result ? decodeURIComponent(result[2]) : null;
}

</script>


{% endblock %}
